<template>
	<div class="system-role-container layout-padding">
		<div class="system-role-padding layout-padding-auto">
			<el-card shadow="hover" class="pageQueryBoxArea mb10">
				<el-form :model="state.param" :inline="true">
					<el-form-item label="门店类型：">
						<el-select v-model="state.param.storeType" placeholder="请选择门店类型">
							<el-option v-for="item in state.query.storeType" :key="item.value"
								:label="item.label" :value="item.value" />
						</el-select>
					</el-form-item>
				
					<el-form-item label="查询类型：">
						<el-select v-model="state.param.searchType" placeholder="请选择查询类型">
							<el-option v-for="item in state.query.searchType" :key="item.value"
								:label="item.label" :value="item.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="选择门店：">
						<el-select v-model="state.param.store" clearable placeholder="请选择门店">
							<el-option v-for="item in state.query.storeList" :key="item.id"
								:label="item.name" :value="item.id" />
						</el-select>
					</el-form-item>
				
					<el-form-item label="日期选择：">
						<el-date-picker v-model="state.param.dateTime" type="daterange" unlink-panels :shortcuts="shortcuts"
							format="YYYY/MM/DD" value-format="YYYY-MM-DD" range-separator="-" :disabled-date="disabledDate"
							start-placeholder="开始日期" end-placeholder="结束日期" />
					</el-form-item>
				
					<el-form-item label="手工数量：">
						<div class="flex rangeBox">
							<el-input-number placeholder="最小值" v-model="state.param.manualNumS" :controls="false"  />
							<div class="ml5 mr5">
								<span>-</span>
							</div>
							<el-input-number placeholder="最大值" v-model="state.param.manualNumE" :controls="false" />
						</div>
					</el-form-item>
				
					<el-form-item label="评价数量：">
						<div class="flex rangeBox">
							<el-input-number placeholder="最小值" v-model="state.param.evaluationNumS" :controls="false"  />
							<div class="ml5 mr5">
								<span>-</span>
							</div>
							<el-input-number placeholder="最大值" v-model="state.param.evaluationNumE" :controls="false" />
						</div>
					</el-form-item>
				
					<el-form-item label="筛选条件：">
						<el-select v-model="state.param.screenCardType" clearable placeholder="请选择筛选条件">
							<el-option label="指定卡项查询" :value=1 />
							<el-option label="屏蔽卡项查询" :value=2 />
						</el-select>
					</el-form-item>
					<el-form-item :label="state.param.screenCardType == 1 ? '指定卡项': '屏蔽卡项'">
						<el-select v-model="state.param.store" clearable placeholder="请选择卡项" class="w100">
							<el-option v-for="item in state.query.storeList" :key="item.id"
								:label="item.name" :value="item.id" />
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="search()">
							<el-icon>
								<ele-Search />
							</el-icon> 搜 索
						</el-button>
					</el-form-item>
				</el-form>
			</el-card>
			<el-card shadow="hover" style="display: flex;flex-direction: column;flex: 1;height: inherit;">
				<section style="display: flex;flex-direction: column; flex: 1;height: inherit;">
					<el-table v-if="state.param.searchType === 1" :data="state.tableData" style="width: 100%" border> 
						<el-table-column label="门店名称" prop="storeName" />
						<el-table-column  sortable > 
							<template #header>
								<section style="display: inline-flex">
									<span>服务项目</span>
									<el-tooltip effect="dark" content="该员工参与的服务项目数量。" 
										placement="left-start" >
										<svg t="1702367275758" style="transform: translateY(2px);" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2391" width="18" height="18"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m32 704h-64v-64h64v64z m11.2-203.2l-5.6 4.8c-3.2 2.4-5.6 8-5.6 12.8v58.4h-64v-58.4c0-24.8 11.2-48 29.6-63.2l5.6-4.8c56-44.8 83.2-68 83.2-108C598.4 358.4 560 320 512 320c-49.6 0-86.4 36.8-86.4 86.4h-64C361.6 322.4 428 256 512 256c83.2 0 150.4 67.2 150.4 150.4 0 72.8-49.6 112.8-107.2 158.4z" p-id="2392" fill="#bfbfbf"></path></svg>
									</el-tooltip> 
								</section> 
							</template>
							<template #default="scope">
								<p class="order-number">{{ scope.row.name }}</p>
							</template>
						</el-table-column>

						<el-table-column  sortable > 
							<template #header>
								<section style="display: inline-flex">
									<span>手工数</span>
									<el-tooltip effect="dark" content="该员工参与服务项目所计算的手工数量，如一个项目有2人参与服务，则手工数量为0.5次。" 
										placement="left-start" >
										<svg t="1702367275758" style="transform: translateY(2px);" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2391" width="18" height="18"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m32 704h-64v-64h64v64z m11.2-203.2l-5.6 4.8c-3.2 2.4-5.6 8-5.6 12.8v58.4h-64v-58.4c0-24.8 11.2-48 29.6-63.2l5.6-4.8c56-44.8 83.2-68 83.2-108C598.4 358.4 560 320 512 320c-49.6 0-86.4 36.8-86.4 86.4h-64C361.6 322.4 428 256 512 256c83.2 0 150.4 67.2 150.4 150.4 0 72.8-49.6 112.8-107.2 158.4z" p-id="2392" fill="#bfbfbf"></path></svg>
									</el-tooltip> 
								</section> 
							</template>
							<template #default="scope">
								<p class="order-number">{{ scope.row.name }}</p>
							</template>
						</el-table-column>

						<el-table-column sortable label="评价数量"></el-table-column>
						<el-table-column label="评价占比"></el-table-column>
						<el-table-column sortable label="平均分"></el-table-column>
						<el-table-column sortable label="5分"></el-table-column>
						<el-table-column sortable label="4分"></el-table-column>
						<el-table-column sortable label="3分"></el-table-column>
						<el-table-column sortable label="2分"></el-table-column>
						<el-table-column sortable label="1分"></el-table-column> 

						<el-table-column label="操作" prop="cellPrice">
							<template #default="scope">
								<el-link :underline="false" type="primary">详情</el-link>
							</template>
						</el-table-column>
					</el-table>

					<el-table v-if="state.param.searchType === 2" :data="state.tableData" style="width: 100%" border> 
						<el-table-column label="员工" prop="name" />
						<el-table-column label="岗位" prop="name" />
						<el-table-column label="状态" prop="name" />
						<el-table-column  sortable  width="140"> 
							<template #header>
								<section style="display: inline-flex">
									<span>服务项目</span>
									<el-tooltip effect="dark" content="该员工参与的服务项目数量。" 
										placement="left-start" >
										<svg t="1702367275758" style="transform: translateY(2px);" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2391" width="18" height="18"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m32 704h-64v-64h64v64z m11.2-203.2l-5.6 4.8c-3.2 2.4-5.6 8-5.6 12.8v58.4h-64v-58.4c0-24.8 11.2-48 29.6-63.2l5.6-4.8c56-44.8 83.2-68 83.2-108C598.4 358.4 560 320 512 320c-49.6 0-86.4 36.8-86.4 86.4h-64C361.6 322.4 428 256 512 256c83.2 0 150.4 67.2 150.4 150.4 0 72.8-49.6 112.8-107.2 158.4z" p-id="2392" fill="#bfbfbf"></path></svg>
									</el-tooltip> 
								</section> 
							</template>
							<template #default="scope">
								<p class="order-number">{{ scope.row.name }}</p>
							</template>
						</el-table-column>

						<el-table-column  sortable width="140"> 
							<template #header>
								<section style="display: inline-flex">
									<span>手工数量</span>
									<el-tooltip effect="dark" content="该员工参与服务项目所计算的手工数量，如一个项目有2人参与服务，则手工数量为0.5次。" 
										placement="left-start" >
										<svg t="1702367275758" style="transform: translateY(2px);" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2391" width="18" height="18"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m32 704h-64v-64h64v64z m11.2-203.2l-5.6 4.8c-3.2 2.4-5.6 8-5.6 12.8v58.4h-64v-58.4c0-24.8 11.2-48 29.6-63.2l5.6-4.8c56-44.8 83.2-68 83.2-108C598.4 358.4 560 320 512 320c-49.6 0-86.4 36.8-86.4 86.4h-64C361.6 322.4 428 256 512 256c83.2 0 150.4 67.2 150.4 150.4 0 72.8-49.6 112.8-107.2 158.4z" p-id="2392" fill="#bfbfbf"></path></svg>
									</el-tooltip> 
								</section> 
							</template>
							<template #default="scope">
								<p class="order-number">{{ scope.row.name }}</p>
							</template>
						</el-table-column>

						<el-table-column sortable label="评价数量"  width="120"></el-table-column>
						<el-table-column label="评价占比"></el-table-column>
						<el-table-column sortable label="平均分"></el-table-column>
						<el-table-column sortable label="5分"></el-table-column>
						<el-table-column sortable label="4分"></el-table-column>
						<el-table-column sortable label="3分"></el-table-column>
						<el-table-column sortable label="2分"></el-table-column>
						<el-table-column sortable label="1分"></el-table-column> 

						<el-table-column label="操作" prop="cellPrice">
							<template #default="scope">
								<el-link :underline="false" type="primary">详情</el-link>
							</template>
						</el-table-column>
					</el-table>

					<el-table :data="state.tableData" v-if="state.param.searchType === 3" style="width: 100%" border> 
						<el-table-column label="订单编号" prop="name" />
						<el-table-column label="会员名称" prop="name" />
						<el-table-column label="会员手机号" prop="name" />
						<el-table-column label="服务卡项" prop="name" />
						<el-table-column label="服务评分" prop="name" sortable />  
						<el-table-column label="服务员工" prop="name" />
						<el-table-column label="服务意见" prop="name" />

						<el-table-column label="服务时间" prop="name" sortable />
						
						<el-table-column label="操作" prop="cellPrice">
							<template #default="scope">
								<el-link :underline="false" type="primary">详情</el-link>
							</template>
						</el-table-column>
					</el-table>
					<el-row justify="end">
						<el-col :span="24" class="flex-end-center">
							<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
								:pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.param.pageNum" background
								v-model:page-size="state.param.pageSize" layout="total, sizes, prev, pager, next, jumper"
								:total="state.total">
							</el-pagination>
						</el-col>
					</el-row>
				</section>
			</el-card>
		</div>
		<ItemList v-model="previewVisble" />
	</div>
</template>

<script setup lang="ts" name="funCountup">
import {  onMounted, reactive, ref } from 'vue'; 
import type { storeNodeListData } from "/@/types/order";
import { evaluationNodeList, evaluationEmployeeList, evaluationServiceList } from '/@/api/personnel';
import ItemList from '/@/views/personnel/scoringStatistics/components/ItemList.vue'  

const state = reactive({
	dialogTitle: '',
	param: {
		keyword: '',
		jobType: '',
		dateTime: '',
		total: 0, 
		pageNum: 1,
		pageSize: 10,
		rowId: 0,
		storeType: '',
		searchType: 1,
		store: '',
		manualNumS:null,
		manualNumE:null,
		evaluationNumS:null,
		evaluationNumE:null,
		screenCardType:null,
	},
	query: { 
		jobTypeList: [
			{ value: 1, label: '全部' },
			{ value: 2, label: '总部' },
			{ value: 3, label: '门店' }
		],
		storeType: [
			{ value: null, label: '全部' },
			{ value: 0, label: '直营' },
			{ value: 1, label: '加盟' }
		],
		searchType: [
			{ value: 1, label: '门店' },
			{ value: 2, label: '员工' },
			{ value: 3, label: '评价' }
		],  
		storeList: [] as Array<storeNodeListData>,
	},
	loading: false,
	total: 0,
	tableData: [{}] as Array<any>,
	userName: '', 
	type: 0	
});

const previewVisble = ref(false)



const handleSizeChange = () => {}
const handleCurrentChange = () => {}

const next = (status: number) => {
	state.param.searchType = status
}

const shortcuts = [
	{
		text: '本月',
		value: () => {
		const end = new Date()
		const start = new Date()
		start.setTime(start.setDate(1))
		return [start, end]
		},
	},
	{
		text: '近一个月',
		value: () => {
		const end = new Date()
		const start = new Date()
		start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
		return [start, end]
		},
	},
	{
		text: '近三个月',
		value: () => {
		const end = new Date()
		const start = new Date()
		start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
		return [start, end]
		},
	},
	{
		text: '近半年',
		value: () => {
		const end = new Date()
		const start = new Date()
		start.setTime(start.getTime() - 3600 * 1000 * 24 * 180)
		return [start, end]
		},
	},
	{
		text: '近一年',
		value: () => {
		const end = new Date()
		const start = new Date()
		start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
		return [start, end]
		},
	},
]

const disabledDate= (time: Date) => time.getTime() > Date .now();


const addSearchItem = () => {
	previewVisble.value = true 
}
const addShieldItem = () => {
	previewVisble.value = true 
}

// 分页点击 条数
const onHandleSizeChange = (val: number) => {
	state.param.pageSize = val;
	getList();
};

// 分页点击
const onHandleCurrentChange = (val: number) => {
	state.param.pageNum = val;
	getList();
};

const getList = async() =>{
	state.loading = true;//不用传参， 请求得入参在上面都定义了 param这里吗？
	let params = {
		type: state.param.jobType,
		keyword: state.param.keyword,
		pageNum: state.param.pageNum,
		pageSize: state.param.pageSize,
	}
	if(state.param.searchType == 1){
		const { results } = await evaluationNodeList(params);
		state.loading = false;
		state.tableData = results.records;
		state.total = results.total;
	}else if(state.param.searchType == 2){
		const { results } = await evaluationEmployeeList(params);
		state.loading = false;
		state.tableData = results.records;
		state.total = results.total;
	}else if(state.param.searchType == 3){
		const { results } = await evaluationServiceList(params);
		state.loading = false;
		state.tableData = results.records;
		state.total = results.total;
	}
};

const search = () => {
	state.param.pageNum = 1;
	getList();
}

// 页面加载时
onMounted(() => {
	getList();
});
</script>

<style scoped lang="scss">
@import '../../../theme/mixins/index.scss';
:deep(.el-card__body){
	display: flex;
	flex-direction: column;
	flex: 1;
	height: inherit;
	.el-table{
		flex: 1;
		.el-table__inner-wrapper::before{
			background: none !important;
		}
	}
}
</style>